<template>
  <main class="w-full h-full dark:bg-black p-4">
    <use-table
      :columns="columns"
      :searchSelectOption="searchSelectOption"
      :allData="allData"
      :personalized="true"
      v-model:selectedRowKey="selectedRowKey"
      @modifyUserData="openModifySubjectForm"
      v-model:visible="modifySubjectFormVisible"
      :loading="loading"
      @delete-select-user="deleteSelectSubject"
      :total="total"
    >
      <template #function>
        <a-tooltip placement="bottom">
          <template #title>
            <span>添加科目</span>
          </template>
          <div class="cursor-pointer text-lg text-blue-500 mr-2" @click="openAddStudentForm">
            <plus-circle-outlined />
          </div>
        </a-tooltip>
        <a-tooltip placement="bottom">
          <template #title>
            <span>删除选中科目</span>
          </template>
          <div class="cursor-pointer text-lg text-red-500" @click="deleteSelectSubject">
            <close-circle-outlined />
          </div>
        </a-tooltip>
      </template>
      <template #title> 科目管理 </template>
    </use-table>
    <modify-form
      v-model:visible="addSubjectModalVisible"
      modal-title-text="添加科目"
      @handleOk="completeAddSubjectForm"
    >
      <template #container>
        <div>
          <div class="flex items-center">
            <span class="w-22"> 科目名称： </span>
            <a-input v-model:value="addSubjectForm.subject_name" />
          </div>
          <div class="flex items-center mt-3">
            <span class="w-18"> 所属专业： </span>
            <a-select v-model:value="addSubjectForm.major_name" style="width: 180px">
              <a-select-option v-for="i in majorList" :key="i.key" :value="i.major_name">
                {{ i.major_name }}
              </a-select-option>
            </a-select>
          </div>
          <div class="flex items-center mt-3">
            <span class="w-18"> 状态： </span>
            <a-switch
              :checked="addSubjectForm.status === 0 ? false : true"
              @click="
                addSubjectForm.status === 0
                  ? (addSubjectForm.status = 1)
                  : (addSubjectForm.status = 0)
              "
              checked-children="启用"
              un-checked-children="禁用"
            ></a-switch>
          </div>
        </div>
      </template>
    </modify-form>
    <modify-form
      v-model:visible="modifySubjectFormVisible"
      :modal-title-text="modalTitleText"
      @handleOk="completeModifySubjectForm"
    >
      <template #container>
        <div>
          <div class="flex items-center">
            <span class="w-22"> 科目名称： </span>
            <a-input v-model:value="modifySubjectForm.subject_name" />
          </div>
          <div class="flex items-center mt-3">
            <span class="w-18"> 所属专业： </span>
            <a-select v-model:value="modifySubjectForm.major_name" style="width: 180px">
              <a-select-option v-for="i in majorList" :key="i.key" :value="i.major_name">
                {{ i.major_name }}
              </a-select-option>
            </a-select>
          </div>
          <div class="flex items-center mt-3">
            <span class="w-18"> 状态： </span>
            <a-switch
              :checked="modifySubjectForm.status === 0 ? false : true"
              @click="
                modifySubjectForm.status === 0
                  ? (modifySubjectForm.status = 1)
                  : (modifySubjectForm.status = 0)
              "
              checked-children="启用"
              un-checked-children="禁用"
            ></a-switch>
          </div>
        </div>
      </template>
    </modify-form>
  </main>
</template>

<script setup lang="ts">
  import { getSubject, deleteSubject, getMajors, addSubject, modifySubject } from '@/api/student';
  import { SubJect, Majors } from '@/utils/interface';
  import { message } from 'ant-design-vue';
  import { CloseCircleOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';

  const columns = [
    {
      title: '科目名称',
      dataIndex: 'subject_name',
      align: 'center',
      width: 160,
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      width: 80,
    },
    {
      title: '专业名称',
      dataIndex: 'major_name',
      align: 'center',
      width: 130,
    },
    {
      title: '添加时间',
      align: 'center',
      width: 110,
      dataIndex: 'add_time',
      sorter: (a, b) => a.add_time - b.add_time,
    },
    {
      title: '操作',
      align: 'center',
      width: 70,
      dataIndex: 'operation',
    },
  ];
  const searchSelectOption: { value: string; label: string }[] = [
    {
      value: 'subject_name',
      label: '科目名称',
    },
    {
      value: 'major_name',
      label: '专业名称',
    },
  ];
  let loading = ref(false);
  let allData = ref<SubJect[]>([]);
  let total = ref(0);
  const getAllSubject = async () => {
    loading.value = true;
    const { data } = await getSubject();
    allData.value = data as SubJect[];
    total.value = allData.value.length;
    loading.value = false;
  };
  getAllSubject();
  let majorList = ref<Majors[]>([]);
  onActivated(async () => {
    const { data } = await getMajors();
    majorList.value = data as Majors[];
  });

  let selectedRowKey = ref([]);
  const deleteSelectSubject = async (key: number[] | string[] | any) => {
    const selectKey = Array.isArray(key) ? key : selectedRowKey.value;
    if (selectKey.length === 0) {
      message.warning('请选择要删除的科目');
      return;
    }
    const { status, msg } = (await deleteSubject(selectKey)) as any;
    if (status === 200) {
      message.success(msg);
      getAllSubject();
    }
  };

  let addSubjectModalVisible = ref(false);
  let addSubjectForm = ref({
    subject_name: '',
    major_name: '',
    status: 0,
  });
  const openAddStudentForm = () => {
    addSubjectModalVisible.value = true;
  };
  const completeAddSubjectForm = async () => {
    const { status, subject_name, major_name } = addSubjectForm.value;
    if (!subject_name || !major_name) {
      message.warning('请输入完整信息');
      return;
    }
    const { status: resStatus, msg } = (await addSubject({
      subject_name,
      major_name,
      status,
    })) as any;
    if (resStatus === 200) {
      message.success(msg);
      addSubjectForm.value = {
        subject_name: '',
        major_name: '',
        status: 0,
      };
      addSubjectModalVisible.value = false;
      await getAllSubject();
    }
  };

  let modifySubjectFormVisible = ref(false);
  let modalTitleText = ref('修改专业信息');
  let modifySubjectForm = ref<SubJect>({
    subject_name: '',
    major_name: '',
    status: 0,
    key: 0,
  });
  const openModifySubjectForm = (key: number) => {
    const clickSubject = allData.value.find((item: any) => item.key === key) as any;
    if (clickSubject !== undefined) {
      modalTitleText.value = `修改 ${clickSubject.subject_name} 的信息`;
      modifySubjectForm.value = {
        ...clickSubject,
      };
      modifySubjectFormVisible.value = true;
    } else message.error('发生错误');
  };
  const completeModifySubjectForm = async () => {
    const { key, subject_name, major_name, status } = modifySubjectForm.value;
    if (!subject_name || !major_name) {
      message.warning('请输入完整信息');
      return;
    }
    const { status: resStatus, msg } = (await modifySubject({
      id: key as number,
      subject_name,
      major_name,
      status,
    })) as any;
    if (resStatus === 200) {
      message.success(msg);
      modifySubjectFormVisible.value = false;
      getAllSubject();
    }
  };
</script>
